<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<!-- 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。  -->
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label> <input
					type="email" class="form-control" id="exampleInputEmail1"
					placeholder="Email">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label> <input
					type="password" class="form-control" id="exampleInputPassword1"
					placeholder="Password">
			</div>
			<div class="form-group">
				<label for="exampleInputFile">File input</label> <input type="file"
					id="exampleInputFile">
				<p class="help-block">Example block-level help text here.</p>
			</div>
			<div class="checkbox">
				<label> <input type="checkbox"> Check me out
				</label>
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>
		<hr>
		<!-- 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。  -->
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputName2">Name</label> <input type="text"
					class="form-control" id="exampleInputName2" placeholder="Jane Doe">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">Email</label> <input type="email"
					class="form-control" id="exampleInputEmail2"
					placeholder="jane.doe@example.com">
			</div>
			<button type="submit" class="btn btn-default">Send
				invitation</button>
		</form>
		<hr>
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="exampleInputEmail3">Email
					address</label> <input type="email" class="form-control"
					id="exampleInputEmail3" placeholder="Email">
			</div>
			<div class="form-group">
				<label class="sr-only" for="exampleInputPassword3">Password</label>
				<input type="password" class="form-control"
					id="exampleInputPassword3" placeholder="Password">
			</div>
			<div class="checkbox">
				<label> <input type="checkbox"> Remember me
				</label>
			</div>
			<button type="submit" class="btn btn-default">Sign in</button>
		</form>
		<hr>
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="exampleInputAmount">Amount (in
					dollars)</label>
				<div class="input-group">
					<div class="input-group-addon">$</div>
					<input type="text" class="form-control" id="exampleInputAmount"
						placeholder="Amount">
					<div class="input-group-addon">.00</div>
				</div>
			</div>
			<button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>
		<hr>
		<!-- 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了  -->
		<form class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3"
						placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3"
						placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label> <input type="checkbox"> Remember me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>
				</div>
			</div>
		</form>
		<hr>
		<!-- 包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。  -->
		<input type="text" class="form-control" placeholder="Text input">
		<hr>
		<!-- 支持多行文本的表单控件。可根据需要改变 rows 属性。  -->
		<textarea class="form-control" rows="3"></textarea>
		<hr>
		<!-- 多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。  -->
		<div class="checkbox">
			<label> <input type="checkbox" value=""> Option one
				is this and that&mdash;be sure to include why it's great
			</label>
		</div>
		<div class="checkbox disabled">
			<label> <input type="checkbox" value="" disabled>
				Option two is disabled
			</label>
		</div>

		<div class="radio">
			<label> <input type="radio" name="optionsRadios"
				id="optionsRadios1" value="option1" checked> Option one is
				this and that&mdash;be sure to include why it's great
			</label>
		</div>
		<div class="radio">
			<label> <input type="radio" name="optionsRadios"
				id="optionsRadios2" value="option2"> Option two can be
				something else and selecting it will deselect option one
			</label>
		</div>
		<div class="radio disabled">
			<label> <input type="radio" name="optionsRadios"
				id="optionsRadios3" value="option3" disabled> Option three
				is disabled
			</label>
		</div>
		<hr>
		<!-- 通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。  -->
		<label class="checkbox-inline"> <input type="checkbox"
			id="inlineCheckbox1" value="option1"> 1
		</label> <label class="checkbox-inline"> <input type="checkbox"
			id="inlineCheckbox2" value="option2"> 2
		</label> <label class="checkbox-inline"> <input type="checkbox"
			id="inlineCheckbox3" value="option3"> 3
		</label> <br> <label class="radio-inline"> <input type="radio"
			name="inlineRadioOptions" id="inlineRadio1" value="option1">
			1
		</label> <label class="radio-inline"> <input type="radio"
			name="inlineRadioOptions" id="inlineRadio2" value="option2">
			2
		</label> <label class="radio-inline"> <input type="radio"
			name="inlineRadioOptions" id="inlineRadio3" value="option3">
			3
		</label>
		<hr>
		<!-- select -->
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<hr>
		<!-- 对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。  -->
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<hr>
		<!-- 如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。  -->
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<p class="form-control-static">email@example.com</p>
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword"
						placeholder="Password">
				</div>
			</div>
		</form>
		<hr>
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only">Email</label>
				<p class="form-control-static">email@example.com</p>
			</div>
			<div class="form-group">
				<label for="inputPassword2" class="sr-only">Password</label> <input
					type="password" class="form-control" id="inputPassword2"
					placeholder="Password">
			</div>
			<button type="submit" class="btn btn-default">Confirm
				identity</button>
		</form>
		<hr>
		<!-- 我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。  -->
		<input class="form-control" id="focusedInput" type="text"
			placeholder="focus input here...">
		<!-- 为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。  -->
		<input class="form-control" id="disabledInput" type="text"
			placeholder="Disabled input here..." disabled>
		<!-- 为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。  -->
		<input class="form-control" type="text"
			placeholder="Readonly input here…" readonly>
		<hr>
		<!-- 为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。  -->
		<form>
			<fieldset disabled>
				<div class="form-group">
					<label for="disabledTextInput">Disabled input</label> <input
						type="text" id="disabledTextInput" class="form-control"
						placeholder="Disabled input">
				</div>
				<div class="form-group">
					<label for="disabledSelect">Disabled select menu</label> <select
						id="disabledSelect" class="form-control">
						<option>Disabled select</option>
					</select>
				</div>
				<div class="checkbox">
					<label> <input type="checkbox"> Can't check this
					</label>
				</div>
				<button type="submit" class="btn btn-primary">Submit</button>
			</fieldset>
		</form>
		<hr>
		<!-- Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。  -->
		<div class="form-group has-success">
			<label class="control-label" for="inputSuccess1">Input with
				success</label> <input type="text" class="form-control" id="inputSuccess1">
		</div>
		<div class="form-group has-warning">
			<label class="control-label" for="inputWarning1">Input with
				warning</label> <input type="text" class="form-control" id="inputWarning1">
		</div>
		<div class="form-group has-error">
			<label class="control-label" for="inputError1">Input with
				error</label> <input type="text" class="form-control" id="inputError1">
		</div>
		<div class="has-success">
			<div class="checkbox">
				<label> <input type="checkbox" id="checkboxSuccess"
					value="option1"> Checkbox with success
				</label>
			</div>
		</div>
		<div class="has-warning">
			<div class="checkbox">
				<label> <input type="checkbox" id="checkboxWarning"
					value="option1"> Checkbox with warning
				</label>
			</div>
		</div>
		<div class="has-error">
			<div class="checkbox">
				<label> <input type="checkbox" id="checkboxError"
					value="option1"> Checkbox with error
				</label>
			</div>
		</div>
		<hr>
		<!-- 你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。  -->
		<div class="form-group has-success has-feedback">
			<label class="control-label" for="inputSuccess2">Input with
				success</label> <input type="text" class="form-control" id="inputSuccess2"
				aria-describedby="inputSuccess2Status"> <span
				class="glyphicon glyphicon-ok form-control-feedback"
				aria-hidden="true"></span> <span id="inputSuccess2Status"
				class="sr-only">(success)</span>
		</div>
		<div class="form-group has-warning has-feedback">
			<label class="control-label" for="inputWarning2">Input with
				warning</label> <input type="text" class="form-control" id="inputWarning2"
				aria-describedby="inputWarning2Status"> <span
				class="glyphicon glyphicon-warning-sign form-control-feedback"
				aria-hidden="true"></span> <span id="inputWarning2Status"
				class="sr-only">(warning)</span>
		</div>
		<div class="form-group has-error has-feedback">
			<label class="control-label" for="inputError2">Input with
				error</label> <input type="text" class="form-control" id="inputError2"
				aria-describedby="inputError2Status"> <span
				class="glyphicon glyphicon-remove form-control-feedback"
				aria-hidden="true"></span> <span id="inputError2Status"
				class="sr-only">(error)</span>
		</div>
		<div class="form-group has-success has-feedback">
			<label class="control-label" for="inputGroupSuccess1">Input
				group with success</label>
			<div class="input-group">
				<span class="input-group-addon">@</span> <input type="text"
					class="form-control" id="inputGroupSuccess1"
					aria-describedby="inputGroupSuccess1Status">
			</div>
			<span class="glyphicon glyphicon-ok form-control-feedback"
				aria-hidden="true"></span> <span id="inputGroupSuccess1Status"
				class="sr-only">(success)</span>
		</div>
		<hr>
		<form class="form-horizontal">
			<div class="form-group has-success has-feedback">
				<label class="control-label col-sm-3" for="inputSuccess3">Input
					with success</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" id="inputSuccess3"
						aria-describedby="inputSuccess3Status"> <span
						class="glyphicon glyphicon-ok form-control-feedback"
						aria-hidden="true"></span> <span id="inputSuccess3Status"
						class="sr-only">(success)</span>
				</div>
			</div>
			<div class="form-group has-success has-feedback">
				<label class="control-label col-sm-3" for="inputGroupSuccess2">Input
					group with success</label>
				<div class="col-sm-9">
					<div class="input-group">
						<span class="input-group-addon">@</span> <input type="text"
							class="form-control" id="inputGroupSuccess2"
							aria-describedby="inputGroupSuccess2Status">
					</div>
					<span class="glyphicon glyphicon-ok form-control-feedback"
						aria-hidden="true"></span> <span id="inputGroupSuccess2Status"
						class="sr-only">(success)</span>
				</div>
			</div>
		</form>
		<hr>
		<form class="form-inline">
			<div class="form-group has-success has-feedback">
				<label class="control-label" for="inputSuccess4">Input with
					success</label> <input type="text" class="form-control" id="inputSuccess4"
					aria-describedby="inputSuccess4Status"> <span
					class="glyphicon glyphicon-ok form-control-feedback"
					aria-hidden="true"></span> <span id="inputSuccess4Status"
					class="sr-only">(success)</span>
			</div>
		</form>
		<form class="form-inline">
			<div class="form-group has-success has-feedback">
				<label class="control-label" for="inputGroupSuccess3">Input
					group with success</label>
				<div class="input-group">
					<span class="input-group-addon">@</span> <input type="text"
						class="form-control" id="inputGroupSuccess3"
						aria-describedby="inputGroupSuccess3Status">
				</div>
				<span class="glyphicon glyphicon-ok form-control-feedback"
					aria-hidden="true"></span> <span id="inputGroupSuccess3Status"
					class="sr-only">(success)</span>
			</div>
		</form>
		<hr>
		<!-- 如果你使用 .sr-only 类来隐藏表单控件的 <label> （而不是使用其它标签选项，如 aria-label 属性）， 一旦它被添加，Bootstrap 会自动调整图标的位置。  -->
		<div class="form-group has-success has-feedback">
			<label class="control-label sr-only" for="inputSuccess5">Hidden
				label</label> <input type="text" class="form-control" id="inputSuccess5"
				aria-describedby="inputSuccess5Status"> <span
				class="glyphicon glyphicon-ok form-control-feedback"
				aria-hidden="true"></span> <span id="inputSuccess5Status"
				class="sr-only">(success)</span>
		</div>
		<div class="form-group has-success has-feedback">
			<label class="control-label sr-only" for="inputGroupSuccess4">Input
				group with success</label>
			<div class="input-group">
				<span class="input-group-addon">@</span> <input type="text"
					class="form-control" id="inputGroupSuccess4"
					aria-describedby="inputGroupSuccess4Status">
			</div>
			<span class="glyphicon glyphicon-ok form-control-feedback"
				aria-hidden="true"></span> <span id="inputGroupSuccess4Status"
				class="sr-only">(success)</span>
		</div>
		<hr>
		<!-- 通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。  -->
		<input class="form-control input-lg" type="text"
			placeholder=".input-lg"> <input class="form-control"
			type="text" placeholder="Default input"> <input
			class="form-control input-sm" type="text" placeholder=".input-sm">

		<select class="form-control input-lg">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select> <select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select> <select class="form-control input-sm">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<hr>
		<!-- 通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。  -->
		<form class="form-horizontal">
			<div class="form-group form-group-lg">
				<label class="col-sm-2 control-label" for="formGroupInputLarge">Large
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputLarge"
						placeholder="Large input">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label" for="formGroupInputDefault">Default
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputDefault"
						placeholder="Default input">
				</div>
			</div>
			<div class="form-group form-group-sm">
				<label class="col-sm-2 control-label" for="formGroupInputSmall">Small
					label</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" id="formGroupInputSmall"
						placeholder="Small input">
				</div>
			</div>
		</form>
	</div>
	<script src="bootstrap/js/jquery-2.1.4.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>